<template>
  <div id="app">
    <div class="tool-bar">
      <button>删除</button>
      <button>复制</button>
      <button>粘贴</button>
    </div>
    <div class="content">
      <div class="note-list">
        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </div>
      <div class="note-split"></div>
      <div class="editor" id="editor">

      </div>
      <div class="editor-split"></div>
      <div class="viewer"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { addEditorEvent, addNoteListEvent } from './utils/splitContainer'
import { Ace, edit as AceEdit } from 'ace-builds'
import {ipcRenderer} from "electron"

require("ace-builds/webpack-resolver");
const fs = require('fs')

@Component({
  components: {}
})
export default class App extends Vue {
  private data= [
    {
      label: '一级 1',
      children: [{
        label: '二级 1-1',
        children: [{
          label: '三级 1-1-1'
        }]
      }]
    }]
  defaultProps= {
    children: 'children',
    label: 'name'
  }

  session!:Ace.EditSession

  currentFile= ''

  handleNodeClick (data:any) {
    if (data.isDir) {
      return
    }
    console.log(data)
    let fs = require('fs')
    let path = require('path')
    let filename = path.join(data.path, data.name)
    this.currentFile = filename
    let content = fs.readFileSync(filename, 'utf-8')
    this.session.setValue(content)
    // console.log(data)
  }

  mounted () {
    let vm = this
    ipcRenderer.on('msg', (event:any, arg:any) => {
      console.log(arg) // prints "pong"
      if (arg.type === 'notes') {
        vm.data = arg.data
      }
    })
    console.log(ipcRenderer)

    ipcRenderer.send('initNotes', 'ping')

    // console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong"

    ipcRenderer.on('asynchronous-reply', (event, arg) => {
      console.log(arg) // prints "pong"
    })
    ipcRenderer.send('asynchronous-message', 'ping')


    const hljs = require('highlight.js')
    const md = require('markdown-it')({
      highlight: function (str:string, lang:string) {
        if (lang && hljs.getLanguage(lang)) {
          try {
            return '<pre class="hljs"><code>' +
              hljs.highlight(lang, str, true).value +
              '<br></code></pre>'
          } catch (__) {
          }
        }

        return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '<br></code></pre>'
      }
    })

    debugger
    const editor = AceEdit('editor')
    let theme = require('ace-builds/src-noconflict/theme-monokai')
    // editor.setTheme(theme)
    editor.setTheme('ace/theme/monokai')
    editor.session.setMode('ace/mode/markdown')
    editor.setOption('showLineNumbers', false)
    editor.setOption('showGutter', false)
    editor.setOption('wrap', 'free')

    let viewer = document.querySelector('.viewer') as HTMLDivElement
    editor.session.addEventListener('change', function (delta:any, session:Ace.EditSession) {
      let raw = session.getValue()
      viewer.innerHTML = md.render(raw)
    })

    editor.commands.addCommand({
      name: 'myCommand',
      bindKey: { win: 'Ctrl-S', mac: 'Command-S' },
      exec: function (editor) {
        fs.writeFileSync(vm.currentFile, editor.getValue(), { flag: 'w' }, (err:any) => {
          console.log(err)
        })
        vm.$msg.success('保存成功！')
      },
      readOnly: true // false if this command should not apply in readOnly mode
    })

    this.session = editor.session
    addEditorEvent(() => {
      editor.resize()
    })
    addNoteListEvent(() => {
      editor.resize()
    })
  }
}
</script>

<style lang="scss">

</style>
